<template>
    <div id="userFriend" :class="show?'active':''">
        <div class="userFriend-container">
             <div class="navbar" :class="showBar?'active':''">
                每日邀请
            </div>
            <div class="data-box">
                <ul>
                    <router-link to="/lottery" tag="li">
                        <span>累计收入（积分）</span>
                        <span class="num">
                            {{game_point||0}}
                            <i class="icon iconfont">&#xe601;</i>
                        </span>
                    </router-link>
                    <router-link to="/inviteList" tag="li">
                        <span>邀请人数</span>
                        <span class="num">
                            {{total||0}}
                            <i class="icon iconfont">&#xe601;</i>
                        </span>
                    </router-link>
                </ul>
            </div>
            <div class="content">
                <div class="content-box">
                <div class="invite-img" @click="showModal">
                        <div class="invite-btn"></div>
                </div>
                <div class="rule">
                    <div class="title">奖励规则</div>
                    <p>
                        每成功邀请一位好友下载并注册，可获得100积分(仅限手机号注册)
                    </p>
                    <p>
                        邀请好友充值游戏，您可获得充值金额的20%积分奖励，单个好友奖励20000积分封顶
                    </p>
                </div>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <van-actionsheet v-model="show" class="popModal">
            <ul>
                <li @click="onSelect" :data-clipboard-text="url" class="copyUrl">复制链接</li>
            </ul>
            <p @click="cancelModal">取消</p>
        </van-actionsheet>
    </div>
</template>

<script>
    import { Toast } from "vant"
    import Clipboard from "clipboard"
    import { mapState} from 'vuex'
    import {inviteList,receivePoint} from 'api/game_box'
    export default {
        data(){
            return{
                show: false,
                url:'',
                game_point:'',
                invite_num:'',
                total:'',
                showBar:false
            }
        },
        created(){
            let agent=this.loginInfo.agent;
            let username=this.loginInfo.username;
            this.url=`http://h5.17byh.com/share/share.html?agent=${agent}&username=${username}`;
            this.init();
        },
        methods:{
            init(){
                inviteList(1).then(res=>{
                    if(res.data.error==0){  
                        this.total=res.data.content.total;
                        this.game_point=res.data.content.game_point;
                        this.invite_num=res.data.content.invite_num;
                    }
                })
            },
            onSelect() {
                 var clipboard = new Clipboard(".copyUrl");
                 clipboard.on("success", e => {
                    this.show = false;
                    Toast.success("复制成功");
                    // 释放内存
                    clipboard.destroy();
                });
                clipboard.on("error", e => {
                    // 不支持复制
                    this.show = false;
                    Toast.fail("该浏览器不支持自动复制");
                    // 释放内存
                    clipboard.destroy();
                });
            },
            showModal(){
                this.show=true;
            },
            cancelModal(){
                this.show=false;
            },
            receive(){
                receivePoint().then(res=>{
                    if(res.data.error==0){
                        this.init();
                    }
                })
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>20){
                this.showBar=true;
              }else{
                 this.showBar=false;
              }
            }
        },
        computed:{
            ...mapState(['loginInfo'])
        },
        mounted () {
           window.addEventListener('scroll', this.handleScroll);
        },
        destroyed (){
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
 .slide-enter-active, .slide-leave-active{
        transition: all 0.3s;
}
.slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0);
}
.navbar{
    position: fixed;
    top:0;
    z-index:99;
    width:7.5rem;
    left:50%;
    transform: translateX(-50%);
    height:0.8rem;
    line-height:0.8rem;
    color:#fff;
    text-align: center;
    font-size:$font-size-l;
    color:#F2F2F2;
    &.active{
        background:$color-focus;
    }
}
#userFriend{
    height:100vh;
    overflow: hidden;
    width: 7.5rem;
    background-color:#d6f9c4;
    padding-bottom:15vh;
    box-sizing: content-box;
    &.active{
        z-index:9999;
    }
    .userFriend-container{
        padding-top:3.9rem;
        width:7.5rem;
        padding-bottom:3rem;
        @include bg-image('../../assets/image/bg_fxhb');
        background-size:100% 100%;
    }
    .data-box{
        display: flex;
        align-items: center;
        margin:0 auto;
        padding:.3rem;
        width:7.11rem;
        height:2.05rem;
        @include bg-image('../../assets/image/userFriend-dataBox');
        background-size:100% 100%;
        ul{
            width:100%;
            li{
                padding: 0 .2rem;
                line-height:.8rem;
                display: flex;
                justify-content: space-between;
                border-bottom:1px solid #ddd;
                font-size:.24rem;
                color:#333;
                &:last-child{
                    border:none;
                }
                .num{
                    font-size:.36rem;   
                }
                .icon{
                    vertical-align: top;
                    margin-left: .1rem;
                }
            }
        }
    }
    .content{
        margin-top:.1rem;
        position:relative;
        .content-box{
            margin: 0 auto;
            padding:.3rem;
            width:7.11rem;
            height:7.21rem;
            @include bg-image('../../assets/image/fxhb_box');
            background-size:100% 100%;
            background-repeat: no-repeat;
            .count{
                display:flex;
                justify-content: space-around;
                li{
                    display:flex;
                    flex-direction: column;
                    width:1.94rem;
                    height:2.4rem;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    text-align: center;
                    color:#fff;
                    .title{
                       line-height:.4rem;
                       padding-top:.13rem;    
                    }
                    .num{
                        flex:1;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        font-size:.48rem;
                    }
                    .btn{
                       margin:0 auto .2rem auto;
                       width:1.48rem;
                       height:.32rem;
                       line-height:.32rem;
                       background-size:100% 100%;
                       background-repeat: no-repeat;
                    }
                }
            }
            .invite-img{
                position:relative;
                margin:.3rem auto;
                width:6.5rem;
                height:2.9rem;
                @include bg-image('../../assets/image/fxhb_invite_img');
                background-size:100% 100%;
                background-repeat: no-repeat;
                .invite-btn{
                    position: absolute;
                    left:50%;
                    top:50%;
                    margin:-1.16rem;
                    width:2.32rem;
                    height:2.32rem;
                    @include bg-image('../../assets/image/invite-btn');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                    animation:mymove 1.6s ease-in-out infinite;
                }
            }
            .rule{
                width:5.76rem;
                margin:0 auto;
                .title{
                    margin-bottom:.3rem;
                    position: relative;
                    text-align: center;
                    font-size:$font-size-m;
                    color:#333;
                    &::before{
                        content:'';
                        width:100%;
                        height:.03rem;
                        position:absolute;
                        top:50%;
                        left:0;
                        transform: translateY(-50%);
                        @include bg-image('../../assets/image/fxhb_title_bg');
                        background-size:100% 100%;
                        background-repeat: no-repeat;
                    }
                }
                p{
                    position:relative;
                    padding-left:.4rem;
                    margin-bottom:.15rem;
                    font-size:.22rem;
                    color:#333;
                    &::before{
                        content:'';
                        width:.1rem;
                        height:.1rem;
                        border-radius:50%;
                        background:#ff7355;
                        position:absolute;
                        left:.15rem;
                        top:.1rem;
                    }
                }
            }
        } 
    }
}
.popModal{
    background:#dee3de;
    ul{
        li{
            position:relative;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            background-color: #fff;
            &:after{
                content: ' ';
                position: absolute;
                pointer-events: none;
                box-sizing: border-box;
                top: -50%;
                left: -50%;
                right: -50%;
                bottom: -50%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                border: 0 solid #eee;
                border-bottom-width: 1px;
            }
        }
    }
    p{
        margin-top:5px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        background-color: #fff;
    }
}
 @keyframes mymove
    {
        0%{
            transform: scale(0.8); 
        }
        25%{
            transform: scale(0.7);
        }
        50%{
            transform: scale(0.8);
        }
        75%{
            transform: scale(0.7);
        }
        100%{
            transform: scale(0.8); 
        }
    }
</style>